<template>
	<div class="my-outer-wrapper">
		<custom-header-bar bg="1" title="我的"></custom-header-bar>
		<custom-tab-bar selected="4"></custom-tab-bar>
		<div class="user-info" @click="handleClickZiliao">
			<div class="flex align-center">
				<image :src="userInfo.avatar" mode="aspectFill" class="avatar" alt="" />
				<div>
					<div style="display: flex;align-items: center;">
						<span class="name">{{ userInfo.uname}}</span>
						<span class="age" v-if="userInfo.utype == 0">{{ userInfo.age }}岁</span>
						<div v-else class="shengji" @click.stop="handleClickUpgrade">
							<image class="shengji-bg" src="@/static/my-shengji.png"></image>
							<image class="shengji-jiantou" src="@/static/my-jiantou.png"></image>
							<div class="shengji-text">升级</div>
						</div>
					</div>
					<div class="phone">{{ userInfo.uphone }}</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div v-if="!!CurrentLinkDevice" class="equipment flex align-center justify-between">
				<div>
					<div class="status">
						<span>设备: </span>
						<span>{{CurrentLinkDevice.nickName||CurrentLinkDevice.name||'--'}}</span>
						<span v-if="CurrentLinkDevice.state==='link'">在线</span>
						<span v-else-if="CurrentLinkDevice.state==='ing'">连接中...</span>
						<span v-else>离线</span>
					</div>
					<div class="electricity">电量：{{BlueBodyInfo.percent?BlueBodyInfo.percent:'--'}}%</div>
				</div>
			</div>
			<div class="menu">
				<div class="item" v-for="(item, index) in menuList" :key="index" @click="handleClickMenu(item)">
					<image :src="require(`@/static/my-menu-${index + 1}.png`)" alt="" class="item-img" />
					<div class="item-name">{{ item.name }}</div>
				</div>
			</div>
			<div class="refresh flex align-center" @click="handleClickMenu({ path: '/pages/my/version/index' })">
				<image src="/static/my-refresh.png" alt="" class="icon" />
				<div class="text">检查更新</div>
				<image src="/static/icon-next-gray.png" class="more-icon" alt="" />
			</div>
			<div class="password flex align-center" @click="handleClickMenu({ path: '/pages/my/password/index' })">
				<image src="/static/my-lock.png" alt="" class="icon" />
				<div class="text">密码管理</div>
				<image src="/static/icon-next-gray.png" class="more-icon" alt="" />
			</div>
			<div class="password flex align-center"
				@click="handleClickMenu({ path: '/pages/moduleLogin/article/article?type=yhxy' })">
				<u-icon class="icon" size="56" name="file-text"></u-icon>
				<div class="text">用户协议</div>
				<image src="/static/icon-next-gray.png" class="more-icon" alt="" />
			</div>
			<div class="password flex align-center"
				@click="handleClickMenu({ path: '/pages/moduleLogin/article/article?type=yszc' })">
				<u-icon class="icon" size="56" name="file-text"></u-icon>
				<div class="text">隐私政策</div>
				<image src="/static/icon-next-gray.png" class="more-icon" alt="" />
			</div>
			<div class="out flex align-center" @click="showOut = true">
				<image src="/static/my-out.png" alt="" class="icon" />
				<div class="text">退出</div>
				<image src="/static/icon-next-gray.png" class="more-icon" alt="" />
			</div>
		</div>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="showService" @close="close">
			<div class="service-popup-box">
				<div v-for="(item, index) in serviceList" :key="index">
					<div class="service-text">{{ item.name }}</div>
					<div class="service-phone flex align-center" @click="handleClickPhone(item)">
						<image src="/static/my-phone.png" alt="" />
						<span>{{ item.phone }}</span>
					</div>
				</div>
				<!-- <div class="service-text">医务客服</div>
				<div class="service-phone flex align-center off">
					<image src="/static/my-phone-off.png" alt="" />
					<span>010-89876888</span>
				</div> -->
				<!-- <div class="offwork">
					<div class="flex align-center justify-center">
						<image src="/static/my-off.png" alt="" style="margin-right: 10upx" />
						非常抱歉
					</div>
					<div>当前不在工作时间，请择时联系</div>
				</div> -->
			</div>
		</u-popup>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="showOut">
			<div class="out-popup-box">
				<div class="tips-title flex align-center">
					<image src="/static/icon-warning.png" class="warning-icon" alt="" />
					<span>退出提示</span>
				</div>
				<div class="tips-text">确认需要退出当前账号吗？</div>
				<div class="tips-bototm flex align-center justify">
					<button class="tips-cancle" @click="showOut = false">取消</button>
					<button class="tips-confirm" @click="handleClickOut">确定</button>
				</div>
			</div>
		</u-popup>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="upgradeShow">
			<div class="out-popup-box">
				<div class="tips-title flex align-center">
					<image src="/static/icon-warning.png" class="warning-icon" alt="" />
					<span>提示</span>
				</div>
				<div class="tips-text">暂无详细信息</div>
				<div class="tips-bototm flex align-center justify">
					<button class="tips-cancle" @click="upgradeShow = false">取消</button>
					<button class="tips-confirm" @click="handleClickUpgrade">去升级</button>
				</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
	import CustomTabBar from "@/components/custom-tab-bar.vue";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		getUserInfo,
		myAvatar,
		numberList
	} from "@/api/my";
	import storage from "@/utils/storage";
	import {
		mapMutations,
		mapGetters,
		mapState,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				menuList: [{
						name: "健康档案",
						path: "/pages/my/archives/index?step=0",
					},
					{
						name: "我的亲属",
						path: "/pages/my/relatives/index",
					},
					{
						name: "预约订单",
						path: "/pages/my/order/index",
					},
					{
						name: "设备管理",
						path: "/pages/my/equipment/index",
					},
					{
						name: "地址管理",
						path: "/pages/address/addressManage?type=edit",
					},
					{
						name: "服务热线",
						path: "service",
					},
				],
				userInfo: {},
				showService: false,
				showOut: false,
				serviceList: [],
				upgradeShow: false
			};
		},
		mounted() {
			setTimeout(() => {
				uni.hideTabBar({
					complete(res) {
						console.log(res)
					}
				})
			}, 300)
		},
		computed: {
			...mapGetters(["PictureUrl", "BlueAvailable", "CurrentLinkDevice", "BlueBodyInfo"]),
		},
		methods: {
			...mapMutations(["SetUserInfo"]),
			...mapActions(["ClearUserinfo"]),
			handleClickZiliao() {
				if (this.userInfo.utype == 1) {
					this.handleClickMenu({
						path: '/pages/my/archives/second'
					})
				} else {
					this.handleClickMenu({
						path: '/pages/my/archives/index?step=0'
					})
				}
			},
			close() {
				this.showService = false;
			},
			// 菜单
			handleClickMenu(item) {
				let path = item.path
				if (item.path === "service") {
					this.showService = true;
					return
				}
				if (item.path.indexOf('/pages/my/archives/index') > -1 && this.userInfo.utype == 1) {
					this.upgradeShow = true
					return
				}
				if (item.path === '/pages/address/addressManage' && this.userInfo.utype == 1) {
					path = '/pages/my/order/index'
				}
				uni.navigateTo({
					url: path,
				});

			},
			handleUpgrade() {
				uni.navigateTo({
					url: "/pages/moduleLogin/info/info?phone=" + this.userInfo.uphone,
				});
			},
			handleClickUpgrade() {
				this.upgradeShow = false
				uni.navigateTo({
					url: "/pages/moduleLogin/info/info?phone=" + this.userInfo.uphone,
				});
			},
			// 用户详情
			getInfo() {
				getUserInfo().then((res) => {
					console.log(res)
					if (res.data.code === 500) {
						uni.redirectTo({
							url: "/pages/moduleLogin/login/login"
						})
					} else {
						this.userInfo = res.data.data;
						storage.setUserInfo(res.data.data);
						this.SetUserInfo(res.data.data)
						this.getMyAvatar()
						uni.stopPullDownRefresh()
					}
				});
			},
			// 头像
			getMyAvatar() {
				myAvatar().then((res) => {
					let info = {}
					if (Array.isArray(res.data.data) && res.data.data.length > 0) {
						info = res.data.data[0]
					} else {
						info = res.data.data
					}
					this.userInfo.avatar = info.fastdfsUrl
					storage.setUserInfo(this.userInfo);
				});
			},
			// 客服电话列表
			getNumberList() {
				numberList().then((res) => {
					this.serviceList = [
						res.data.rows[0],
						res.data.rows[1]
					]
				});
			},
			// 拨打电话
			handleClickPhone(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone,
				});
			},
			// 退出
			handleClickOut() {
				this.ClearUserinfo()
				uni.reLaunch({
					url: "/pages/moduleLogin/login/login",
				});
			},
		},
		created() {
			this.getNumberList();
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
			this.getNumberList();
		},
		components: {
			CustomTabBar,
			CustomHeaderBar,
		},
	};
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-center {
		justify-content: center;
	}

	.my-outer-wrapper {
		background-color: #f4f4f4;
		padding-top: 160upx;
		padding-bottom: 160upx;

		.service-popup-box {
			width: 477upx;
			max-height: 1000upx;
			overflow-y: auto;
			padding-bottom: 50upx;
			background-color: #fff;
			border-radius: 30upx;
			padding-top: 18upx;
			box-sizing: border-box;

			.service-text {
				font-size: 34upx;
				color: #666;
				margin-top: 40upx;
				text-align: center;
			}

			.service-phone {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 15upx;

				image {
					width: 58upx;
					height: 58upx;
					margin-right: 10upx;
				}

				span {
					color: #0fce8b;
					font-size: 38upx;
				}

				&.off span {
					color: #666;
				}
			}

			.offwork {
				margin: 0 15upx;
				border-top: 1upx solid #dddddd;
				padding-top: 19upx;
				color: #dc3338;
				font-size: 26upx;
				margin-top: 45upx;

				image {
					width: 38upx;
					height: 38upx;
				}

				div {
					text-align: center;
				}
			}
		}

		.out-popup-box {
			width: 416upx;
			padding: 0 40upx;
			padding-top: 65upx;
			padding-bottom: 50upx;
			box-sizing: border-box;
		}

		.tips-title {
			justify-content: center;

			span {
				font-size: 34upx;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 20upx;
			}

			.warning-icon {
				width: 52upx;
				height: 52upx;
			}
		}

		.tips-text {
			font-size: 26upx;
			color: #666;
			margin-top: 55upx;
		}

		.tips-bototm {
			margin-top: 60upx;

			.tips-cancle,
			.tips-confirm {
				flex: 1;
				height: 60upx;
				font-size: 26upx;
			}

			.tips-cancle {
				background-color: #ebedf0;
				color: #bfbebe;
			}

			.tips-confirm {
				background-color: #61d7ca;
				color: #fff;
				margin-left: 16upx;
			}
		}
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	image {
		display: block;
		width: 100%;
	}

	.user-info {
		height: 287upx;
		background-color: #82d8cf;
		padding: 48upx 40upx;
		box-sizing: border-box;

		.avatar {
			width: 126upx;
			height: 126upx;
			border-radius: 50%;
			margin-right: 18upx;
		}

		.name {
			color: #fff;
			font-size: 38upx;
			margin-right: 15upx;
		}

		.age {
			height: 40upx;
			padding: 0 12upx;
			border-radius: 10upx;
			background-color: #fff;
			color: #54b6ac;
			font-size: 30upx;
		}

		.phone {
			font-size: 32upx;
			color: #fff;
			margin-top: 18upx;
		}
	}

	.content {
		padding: 0 24upx;
		margin-top: -80upx;

		.equipment {
			border-radius: 30upx;
			background-color: #fff;
			padding-left: 40upx;
			padding-right: 64upx;
			height: 208upx;

			.status {
				font-size: 36upx;
				color: #484848;
			}

			.electricity {
				margin-top: 15upx;
				font-size: 36upx;
				color: rgba(0, 0, 0, 0.65);
			}

			.photo {
				width: 112upx;
				height: 146upx;
			}
		}

		.menu {
			margin-top: 32upx;
			background-color: #fff;
			padding: 46upx;
			padding-bottom: 0;
			border-radius: 30upx;
			column-count: 3;
			-moz-column-count: 3;
			/* Firefox */
			-webkit-column-count: 3;
			/* Safari 和 Chrome */
			column-gap: 100upx;

			.item {
				margin-bottom: 48upx;
			}

			.item-img {
				width: 120upx;
				height: 120upx;
			}

			.item-name {
				margin-top: 14upx;
				color: #484848;
				font-size: 34upx;
			}
		}

		.refresh,
		.password,
		.out {
			height: 148upx;
			border-radius: 30upx;
			background-color: #fff;
			margin-top: 32upx;
			padding: 0 32upx;

			.icon {
				width: 50upx;
				height: 50upx;
			}

			.text {
				padding: 0 20upx;
				font-size: 34upx;
				color: #484848;
				flex: 1;
			}

			.more-icon {
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.shengji {
		position: relative;
		width: 121upx;
		height: 42upx;

		padding-right: 13upx;
		box-sizing: border-box;

		.shengji-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.shengji-jiantou {
			position: absolute;
			width: 22upx;
			height: 22upx;
			left: 10upx;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		.shengji-text {
			position: absolute;
			right: 13upx;
			top: 0;
			bottom: 0;
			margin: auto;
			color: #54B6AC;
			font-size: 30upx;
		}
	}
</style>
